<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" @close="onCancel">

    <a-descriptions bordered style="margin-bottom: 24px" size="large"    :column="2">
      <a-descriptions-item label="字典代码">{{ record.code }}</a-descriptions-item>
      <a-descriptions-item label="字典名称">{{ record.title }}</a-descriptions-item>
      <a-descriptions-item label="读写权限">{{ record.rwState.label }}</a-descriptions-item>
      <a-descriptions-item label="调用状态">{{ record.state.label }}</a-descriptions-item>
      <a-descriptions-item label="字典描述">{{ record.description }}</a-descriptions-item>
    </a-descriptions>

    <a-table :columns="COLUMNS" :data="dataList" :bordered="{wrapper: true, cell: true}" >

    <template #label="{record}">
        <span v-if=" record.theme ==='text' ">{{ record.label }}</span>
        <a-tag v-else-if="record.theme==='default'">{{ record.label }}</a-tag>
        <a-tag v-else :color="record.theme">{{ record.label }}</a-tag>
      </template>
    </a-table>
  </a-drawer>
</template>

<script lang="ts" setup>
import {LocalDrawer} from '@/libs/core'
import {DICT_ITEM_COLUMNS} from '../resource/colums'

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const dataList = props.record.items

const COLUMNS = DICT_ITEM_COLUMNS.filter(x => x.dataIndex !== 'action');


const localDrawer = new LocalDrawer(emit).setMD("字典详情");
const {LAYER, onCancel} = localDrawer


</script>
